<template>
  <div class="app-container" v-loading="loading">
    <!-- 搜索 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="会议主题" prop="meetingName">
        <el-input v-model="queryParams.meetingName" placeholder="请输入会议主题" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="会议类型" prop="meetingType">
        <el-select v-model="queryParams.meetingType" placeholder="请选择会议类型">
          <el-option v-for="item in dict.type.meeting_type" :key="item.value" :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 按钮 工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" v-hasPermi="['meetingManagement:add']"
          @click="addMeeting">添加会议</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 数据表格 -->
    <el-table :data="manageList">
      <el-table-column label="序号" type="index" align="center" />
      <el-table-column label="会议主题" align="center" prop="meetingName">
        <template slot-scope="scope" v-hasPermi="['meetingManagement:getInfo']">
          <el-link :underline="false" @click="lookMeeting(scope.row)" type="primary">{{ scope.row.meetingName
            }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="参会人员" align="center" prop="participants" show-overflow-tooltip />
      <el-table-column label="主持人" align="center" prop="meetingCompereName"></el-table-column>
      <el-table-column label="类型" align="center" prop="meetingType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.meeting_type" :value="scope.row.meetingType" />
        </template>
      </el-table-column>
      <el-table-column label="议题" align="center">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" @click="lookTopics(scope.row)">查看</el-link>
        </template>
      </el-table-column>
      <el-table-column label="会议开始时间" align="center" prop="meetingStartTime" width="160" />
      <el-table-column label="会议结束时间" align="center" prop="meetingEndTime" width="160" />
      <el-table-column label="会议时长（h）" align="center" prop="meetingDuration" width="110" />
      <el-table-column label="会议状态" align="center" prop="meetingState">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.met_status" :value="scope.row.meetingState" />
        </template>
      </el-table-column>
     
      <el-table-column label="操作" align="center" width="250">
        <div slot-scope="scope" class="flex-between">
          <el-link v-show="scope.row.meetingState == '0'" :underline="false" type="primary"
            v-hasPermi="['meetingManagement:update']" @click="editMeeting(scope.row)">编辑</el-link>

          <!-- 已结束操作 -->
          <template v-if="scope.row.meetingState == '1'">
            <el-link :underline="false" type="primary" v-hasPermi="['meeting:user:list']"
              @click="lookCheckIn(scope.row)">签到名单</el-link>
          <el-link :underline="false" type="primary" v-hasPermi="['meetingManagement:uploadMeetingFile']"
              @click="addFile(scope.row)">上传会议后文件</el-link> 
          </template>

          <el-link :underline="false" type="primary" v-hasPermi="['meetingManagement:log:list']"
            @click="operationRecord(scope.row)">操作记录</el-link>

          <el-link :underline="false" type="danger" v-show="scope.row.meetingState == '2'"
            v-hasPermi="['meetingManagement:endMeeting']" @click="changeMeetingState(scope.row, '1')">结束会议</el-link>

          <template v-if="scope.row.meetingState == '3'">
            <el-link :underline="false" type="primary" v-hasPermi="['meetingManagement:revocationCancel']"
              @click="changeMeetingState(scope.row, '0')">撤销取消</el-link>
            <el-link :underline="false" type="danger" v-hasPermi="['meetingManagement:delete']"
              @click="delMeeting(scope.row, '0')">删除</el-link>
          </template>

          <!-- 未开始的更多 -->
          <el-dropdown trigger="hover" v-show="scope.row.meetingState == '0'"
            v-hasPermi="['meetingManagement:updateStatus', 'meetingManagement:delayedStart']">
            <span>
              <el-link :underline="false" type="primary">更多<i class="el-icon-arrow-down el-icon--right"></i></el-link>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-hasPermi="['meetingManagement:earlyStart']">
                <el-link :underline="false" @click="changeMeetingState(scope.row, '2')" type="primary">提前开始</el-link>
              </el-dropdown-item>
              <el-dropdown-item v-hasPermi="['meetingManagement:delayedStart']">
                <el-link :underline="false" @click="delayManage(scope.row)" type="primary">延迟</el-link>
              </el-dropdown-item>
              <el-dropdown-item v-hasPermi="['meetingManagement:cancelMeeting']">
                <el-link :underline="false" @click="changeMeetingState(scope.row, '3')" type="danger">取消会议</el-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </div>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改会议管理对话框 -->
    <el-dialog :title="form.meetingId ? (meetingLook ? '查看会议' : '修改会议') : '添加会议'" :visible.sync="open" width="1000px"
      center :close-on-click-modal="false" @close="cancelManage">
      <el-form ref="meetingForm" :model="form" label-width="100px">
        <el-form-item label="会议主题" prop="meetingName"
          :rules="[{ required: true, message: '会议主题不能为空', trigger: 'blur' }]">
          <div v-if="meetingLook">{{ form.meetingName }}</div>
          <el-input v-else v-model="form.meetingName" placeholder="请输入会议主题" />
        </el-form-item>
        <el-form-item label="类型" prop="meetingType" :rules="[{ required: true, message: '类型不能为空', trigger: 'change' }]">
          <div v-if="meetingLook">{{ selectDictLabel(dict.type.meeting_type, form.meetingType) }}</div>
          <el-select v-else v-model="form.meetingType" placeholder="请选择会议类型" class="w-full">
            <el-option v-for="item in dict.type.meeting_type" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主持人" prop="meetingCompere"
          :rules="[{ required: true, message: '主持人不能为空', trigger: 'change' }]">
          <div v-if="meetingLook">{{ form.meetingCompereName }}</div>
          <el-select filterable v-else v-model="form.meetingCompere" placeholder="请输入或选择主持人" class="w-full">
            <el-option v-for="item in userList" :key="item.userId" :label="item.nickName"
              :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="meetingStartTime"
          :rules="[{ required: true, message: '开始时间不能为空', trigger: 'change' }, { validator: validateTime, trigger: 'change' }]">
          <div v-if="meetingLook">{{ form.meetingStartTime }}</div>
          <el-date-picker v-else clearable v-model="form.meetingStartTime" value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime" placeholder="请选择会议时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="meetingEndTime"
          :rules="[{ required: true, message: '结束时间不能为空', trigger: 'change' }, { validator: validateTime, trigger: 'change' }]">
          <div v-if="meetingLook">{{ form.meetingEndTime }}</div>
          <el-date-picker v-else clearable v-model="form.meetingEndTime" value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime" placeholder="请选择会议时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="meetingLook" label="实际开始时间" prop="meetingActuallyStartTime">
          <div>{{ form.meetingActuallyStartTime }}</div>
        </el-form-item>
        <el-form-item v-if="meetingLook" label="实际结束时间" prop="meetingActuallyEndTime">
          <div>{{ form.meetingActuallyEndTime }}</div>
        </el-form-item>
        <el-form-item label="会议文件" prop="meetingTitle">
          <div v-if="meetingLook" style="display: flex;gap: 20px;">
            <el-link v-for="item in form.tbMeetingFile" :key="item.meetingFileUrl" :href="item.meetingFileUrl"
              target="_blank">{{ item.fileName }}</el-link>
          </div>
          <el-upload v-else ref="upload" accept=".pdf" :headers="upload.headers" :action="upload.url" :on-remove="handleRemove"
            :disabled="upload.isUploading" :on-preview="showFile" :on-success="handleFileSuccess" :file-list="form.tbMeetingFile">
            <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传 pdf 文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="签到范围" prop="signInLong"  :rules="[{ required: true,message: '签到范围不能为空', trigger: 'change'}]">
          <div v-if="meetingLook">{{form.signInLong}}米</div>
          <div v-else style="width: 200px;display: flex;" >
            <el-input v-model="form.signInLong" type="number" placeholder="请输入签到范围" size="small" oninput="if(value<0)value=0"/>
            <span style="margin-left: 10px;">米</span>
          </div>
        </el-form-item>
        <el-form-item label="远程签到" prop="isRemote" :rules="[{ required: true}]">
          <div v-if="meetingLook">{{form.isRemote === '1' ? '是' : '否'}}</div>
          <template v-else>
            <el-radio v-model="form.isRemote" label="0">否</el-radio>
            <el-radio v-model="form.isRemote" label="1">是</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="签到地点" prop="meetingAddress" :rules="[{ required: true, message: '签到地点不能为空', trigger: 'change' }]">
          <div v-if="meetingLook">{{ form.meetingAddress }}</div>  
          <el-col v-else :span="26">
              <el-autocomplete class="inline-input" @select="select" v-model="form.meetingAddress" :fetch-suggestions="querySearch"
                placeholder="请选择站点位置" style="width: 600px"></el-autocomplete>
            </el-col>
        </el-form-item>
        <div v-if="!meetingLook">
            <div id="containers"></div>
          </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 会议延迟 -->
    <el-dialog title="会议延迟" :visible.sync="delayOpen" width="400px" center :close-on-click-modal="false">
      <div style="display:flex;align-items: center;" @close="cancel('delayOpen')">
        <label>延迟时间（分钟）：</label>
        <el-input-number v-model="delayTime" :min="1" label="请输入延迟时间" style="flex:1;"></el-input-number>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDelay">确 定</el-button>
        <el-button @click="delayOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 议题列表对话框 -->
    <el-dialog title="议题列表" :visible.sync="topicsOpen" width="800px" center :close-on-click-modal="false">
      <div class="topic-title">
        <div>{{ topicsTitle }}</div>
        <div v-if="topicsForm.meetingState == '0'">
          <el-button v-show="topicsList && topicsList.length > 0" type="primary" icon="el-icon-sort" size="small"
            v-hasPermi="['topicDiscussion:sortList']" @click="sortTopics">排序</el-button>
          <el-button type="primary" icon="el-icon-plus" size="small" v-hasPermi="['topicDiscussion:add']"
            @click="addTopic">添加议题</el-button>
        </div>
      </div>
      <div class="container" v-if="topicsList && topicsList.length > 0">
        <div v-for="(item, index) in topicsList" :key="item.topicId" class="topcis">
          <div class="topcis-time">
            <div class="startTime">{{ parseTime(item.topicStartTime, '{h}:{i}') }}</div>
            <div class="endTime">{{ parseTime(item.topicEndTime, '{h}:{i}') }}</div>
            <div v-if="index + 1 < topicsList.length" class="line"></div>
          </div>
          <div class="topcis-info">
            <div class="line"></div>
            <div class="info-item">
              <span class="info-text">议题名称</span>
              <span class="info-content">{{ item.topicName }}</span>
            </div>
            <div class="info-item">
              <span class="info-text">参会领导</span>
              <span class="info-content">{{ item.leaderUser }}</span>
            </div>
            <div class="info-item">
              <span class="info-text">议题类型</span>
              <span class="info-content">{{ selectDictLabel(dict.type.topic_type, item.topicType) }}</span>
            </div>
            <div class="info-item">
              <span class="info-text">地点</span>
              <span class="info-content">{{ item.topicAddress }}</span>
            </div>
            <div class="info-item">
              <span class="info-text">需求部门</span>
              <span class="info-content">{{ item.deptName }}</span>
            </div>
            <div class="info-item">
              <span class="info-text">部门人员</span>
              <span class="info-content">{{ item.user }}</span>
            </div>
            <div class="info-btn">
              <el-button type="primary" v-hasPermi="['topicDiscussion:log:list']"
                @click="lookRecord(item)">操作记录</el-button>
              <template v-if="topicsForm.meetingState == '0'">
                <el-button type="danger" v-hasPermi="['topicDiscussion:delete']" @click="delTopic(item)">删除</el-button>
                <el-button type="primary" v-hasPermi="['topicDiscussion:update']"
                  @click="editTopic(item)">修改</el-button>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="container">
        <el-empty :image="require('../../../assets/images/empty.png')" :image-size="400" class="mt20"></el-empty>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="topicsOpen = false">确 定</el-button>
        <el-button @click="topicsOpen = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 议题排序 -->
    <el-dialog title="议题排序" :visible.sync="sortOpen" width="600px" center :close-on-click-modal="false"
      @close="cancelSort">
      <ul class="container drag-list">
        <li v-for="(item, index) in sortList" :key="index" draggable class="list-item"
          @dragenter="dragenter($event, index)" @dragover="dragover($event, index)" @dragstart="dragstart(index)">
          {{ item.topicName }}</li>
      </ul>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSort">确 定</el-button>
        <el-button @click="sortOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改议题管理对话框 -->
    <el-dialog :title="topicsForm.topicId ? '修改议题' : '添加议题'" :visible.sync="addTopics" width="600px" center
      :close-on-click-modal="false" @close="cancelTopic">
      <el-form ref="topicsForm" :model="topicsForm" label-width="120px">
        <!-- <el-form-item label="排序" prop="topicSort"
          :rules="[{ required: true, message: '排序不能为空', trigger: ['blur', 'change'] }]">
          <el-input-number v-model="topicsForm.topicSort" label="请输入排序" class="w-full"></el-input-number>
        </el-form-item> -->
        <el-form-item label="议题时长(分钟)" prop="topicDuration"
          :rules="[{ required: true, message: '议题时长不能为空', trigger: ['blur', 'change'] }]">
          <!-- <el-date-picker v-model="topicsForm.meetingTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker> -->
          <el-input-number v-model="topicsForm.topicDuration" :min="1" label="请输入议题时长" class="w-full"></el-input-number>
        </el-form-item>
        <el-form-item label="会议需求部门" prop="deptName"
          :rules="[{ required: true, message: '会议需求部门不能为空', trigger: 'blur' }]">
          <treeselect v-model="topicsForm.deptName" :options="deptOptions" :show-count="true" placeholder="请选择会议需求部门" />
        </el-form-item>
        <el-form-item label="议题名称" prop="topicName" :rules="[{ required: true, message: '议题名称不能为空', trigger: 'blur' }]">
          <el-input v-model="topicsForm.topicName" placeholder="请输入议题名称" />
        </el-form-item>
        <el-form-item label="参会领导" prop="leaderTbMeetingUser"
          :rules="[{ required: true, message: '参会领导不能为空', trigger: 'change' }, { validator: validateUser, trigger: 'change' }]">
          <el-select filterable  v-model="topicsForm.leaderTbMeetingUser" multiple collapse-tags placeholder="请输入或选择参会领导"
            class="w-full">
            <el-option v-for="item in userList" :key="item.userId" :label="item.nickName"
              :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="列席部门、人员" prop="tbMeetingUser"
          :rules="[{ required: true, message: '列席部门、人员不能为空', trigger: 'change' }, { validator: validateUser, trigger: 'change' }]">
          <el-select filterable v-model="topicsForm.tbMeetingUser" multiple collapse-tags placeholder="请输入或选择列席部门、人员" class="w-full">
            <el-option v-for="item in userList" :key="item.userId" :label="item.nickName"
              :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="议题类型" prop="topicType"
          :rules="[{ required: true, message: '议题类型不能为空', trigger: 'change' }]">
          <el-select v-model="topicsForm.topicType" placeholder="请选择议题类型" class="w-full">
            <el-option v-for="item in dict.type.topic_type" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地点" prop="topicAddress" :rules="[{ required: true, message: '地点不能为空', trigger: 'blur' }]">
          <el-input v-model="topicsForm.topicAddress" placeholder="请输入会议地点" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitTopic">确 定</el-button>
        <el-button @click="addTopics = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 操作记录 -->
    <el-dialog title="操作记录" :visible.sync="operationOpen" width="600px" center :close-on-click-modal="false">
      <div class="topic-title">{{ topicsTitle }}</div>
      <div class="container">
        <el-steps v-if="operationList && operationList.length > 0" direction="vertical" :active="operationList.length">
          <el-step v-for="item in operationList" :key="item.id" style="flex-basis:auto">
            <div slot="title" style="color: #3d3d3d;">{{ item.addTime }}</div>
            <el-card slot="description">
              <div class="card-item">
                <div class="card-item-title">修改人</div>
                <div class="card-item-content">{{ item.userName }}</div>
              </div>
              <!-- <div class="card-item">
                <div class="card-item-title">修改会议</div>
                <div class="card-item-content">会议主题</div>
              </div> -->
              <div class="card-item">
                <div class="card-item-title">修改内容</div>
                <div class="card-item-content">{{ item.content }}</div>
              </div>
            </el-card>
          </el-step>
        </el-steps>
        <el-empty v-else :image="require('../../../assets/images/empty.png')" :image-size="400" class="mt20"></el-empty>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel('operationOpen')">确 定</el-button>
        <el-button @click="cancel('operationOpen')">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 签到名单 -->
    <el-dialog title="签到名单" :visible.sync="checkInOpen" width="1000px" center :close-on-click-modal="false"
      @close="cancel('checkInOpen')">
      <div class="container">
        <el-table :data="checkInList">
          <el-table-column label="序号" type="index" align="center" />
          <el-table-column label="姓名" align="center" prop="lastName" />
          <el-table-column label="手机号" align="center" prop="mobile" />
          <el-table-column label="签到时间" align="center" prop="signInTime" />
        </el-table>
        <!-- 分页 -->
        <pagination v-show="checkInTotal > 0" :total="checkInTotal" :page.sync="queryCheckIn.pageNum"
          :limit.sync="queryCheckIn.pageSize" @pagination="getCheckInList" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="checkInOpen = false">确 定</el-button>
        <el-button @click="checkInOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 上传文件 -->
    <el-dialog title="上传文件" :visible.sync="fileOpen" width="1000px" center :close-on-click-modal="false"
      @close="cancel('fileOpen')">
      <div style="display:flex;">
        <label style="line-height: 32px;">上传内容：</label>
        <el-upload accept=".pdf" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading"
        :on-remove="remove"  :on-success="fileSuccess" :on-preview="showFile" :file-list="tbMeetingFile">
          <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传 pdf 文件</div>
        </el-upload>
      </div>
      <div style="margin-top: 20px;">
        <editor v-model="content" :min-height="360"></editor>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="meetingFile">确 定</el-button>
        <el-button @click="fileOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listManage, addManage, updateManage, delManage, delayedStart, uploadMeetingFile, updateStatusManage, getOperateLog,
  listTopic, addTopic, updateTopic, sortTopic, deleteTopic, getTopicLog,getUploadMeetingFile
} from "@/api/meeting/manage";
import AMapLoader from "@amap/amap-jsapi-loader";
import { getSignInList } from "@/api/meeting/inform";
import { getToken } from "@/utils/auth";
import { listUser, deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
window._AMapSecurityConfig = {
  securityJsCode: "b9f463e2c479cc03d8b295b32530b26f", //在这里填写你的安全密钥
};
export default {
  name: "Manage",
  dicts: ['meeting_type', 'met_status', 'topic_type'],
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 会议管理表格数据
      manageList: [],
      // 会议操作类型  新增/查看
      meetingLook: false,
      // 是否显示会议弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        meetingName: null,
        meetingType: null,
      },
      // 表单参数
      form: {
        meetingName: null,
        meetingType: null,
        meetingCompere: null,
        meetingStartTime: null,
        meetingEndTime: null,
        tbMeetingFile: [],
        meetingAddress:null,
        longitude:null,
        latitude:null,
        isRemote:'1',
        signInLong:1000
      },
      // 部门树
      deptOptions: [],
      // 用户列表
      userList: [],
      // 上传文件参数
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/common/upload"
      },
      // 是否打开会议延迟
      delayOpen: false,
      // 延迟时间
      delayTime: null,
      // 是否打开操作记录
      operationOpen: false,
      // 是否打开签到名单
      checkInOpen: false,
      // 签到人员名单搜索条件
      queryCheckIn: {
        meetingName: null,
        meetingSerial: null,
        type: 2,
        pageNum: 1,
        pageSize: 10
      },
      // 签到人员分页
      checkInTotal: 0,
      // 签到人员名单
      checkInList: [],
      // 是否打开上传文件
      fileOpen: false,
      // 上传文件
      tbMeetingFile: [],
      // 当前操作会议
      currentData: null,
      // <!------------ 议题相关 ------------>
      // 会议名称
      topicsTitle: "",
      //是否显示议题列表
      topicsOpen: false,
      // 议题列表
      topicsList: [],
      // 是否显示添加议题
      addTopics: false,
      // 添加议题参数
      topicsForm: {
        topicId: undefined,
        meetingState: null,
        topicSort: null,
        topicName: null,
        topicDuration: null,
        deptName: null,
        topicAddress: null,
        topicType: null,
        tbMeetingUser: [],
        leaderTbMeetingUser: [],
      },
      // 是否显示议题排序
      sortOpen: false,
      // 议题列表  排序版
      sortList: [],
      // 拖拽的下标
      dragIndex: '',
      // 操作记录
      operationList: [],
      // 会议结束后富文本内容
      content:'',
      // 富文本Id
      contentId:null,
      // 地图对象
      map:null,
      auto: null,
      autoOptions: {
        input: "tishikuang", //绑定的搜索关键字的input标签ID，用这个注册
      },
      // 动态中心点
      centerPoint: null,
      // 地名列表
      addressPois:[]
    };
  },
  created() {
    this.handleQuery();
    this.getDeptTree()
    this.getUserList()
  },
  methods: {
    // 地点选择
    select(e){
     this.setCenterPoint(e.address)
     this.map.setCenter(e.address);
    },
     // pois输入建议
     querySearch(queryString, cb) {
      this.auto.search(this.form.meetingAddress, (status, result) => {
            this.addressPois = [];
            if (result.info === "OK") {
              result.tips.forEach((el) => {
                let obj = {
                  address: "",
                  value: "",
                };
                obj.value = el.district + el.address + el.name;
                obj.address = [el.location.lng, el.location.lat];
                this.addressPois.push(JSON.parse(JSON.stringify(obj)));
                var restaurants = this.addressPois;
                cb(restaurants);
              });
            }
          });
    },
    setCenterPoint(path){
      if (this.centerPoint) {
        this.map.remove(this.centerPoint);
      }
      let icon = new AMap.Icon({
        size: new AMap.Size(23, 29), // 图标尺寸
        imageSize: new AMap.Size(23, 29),
        imageOffset: new AMap.Pixel(0, 0),
      });
      this.centerPoint = new AMap.Marker({
        position: path,
        icon, // 添加 Icon 图标 URL
        anchor: "bottom-center",
      });
      let geocoder = new AMap.Geocoder({
        batch: true,
      });
      geocoder.getAddress(path, (status, result) => {
        if (result.info === "OK") {
          this.form.meetingAddress = result.regeocode.formattedAddress;
          this.locationSearch()
        }
      });
      this.map.add(this.centerPoint);
    },
    locationSearch(){
      this.auto.search(this.form.meetingAddress, (status, result) => {
            this.addressPois = [];
            if (result.info === "OK") {
              result.tips.forEach((el) => {
                let obj = {
                  address: "",
                  value: "",
                };
                obj.value = el.district + el.address + el.name;
                obj.address = [el.location.lng, el.location.lat];
                this.addressPois.push(JSON.parse(JSON.stringify(obj)));
              });
            }
          });
    },
    initMap() {
      let that = this;
      let lng = null
      let lat = null
      if(this.form.longitude){
        lng = this.form.longitude
        lat = this.form.latitude
      }else{
        lng = 115.028005,
        lat = 24.783822
      }
      AMapLoader.load({
        key: "3e59bfe46a67c8978a4610290ab39c55", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.HawkEye",
          "AMap.MapType",
          "AMap.AutoComplete",
          "AMap.PlaceSearch",
          "AMap.Geocoder",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          console.log([lng, lat]);
          that.map = new AMap.Map("containers", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 17, //初始化地图级别
            center: [lng, lat], //初始化地图中心点位置
          });
        
          //引入高德地图的空间绑定使用
            that.map.addControl(new AMap.Scale());
          that.map.addControl(new AMap.ToolBar());
          that.map.addControl(new AMap.HawkEye());
          that.map.addControl(new AMap.MapType());
          that.auto = new AMap.AutoComplete(that.autoOptions);
          //
          that.placeSearch = new AMap.PlaceSearch({
            map: that.map,
          });
           this.setCenterPoint([lng, lat]);
          that.map.on("moveend", (e) => {
            let lngLat = this.map.getCenter();
            this.form.latitude = lngLat.lat;
            this.form.longitude = lngLat.lng;
            this.setCenterPoint([lngLat.lng, lngLat.lat]);
          });
          // 构造地点查询类
          // that.auto.on("select", that.select); //绑定查询事件
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleRemove(file, fileList) {
      this.form.tbMeetingFile = fileList  
    },
    remove(file, fileList){
      this.tbMeetingFile = fileList
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查询会议管理列表 */
    getList() {
      this.loading = true;
      listManage(this.queryParams).then(response => {
        this.manageList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 添加会议
    addMeeting() {
      this.meetingLook = false
      this.$refs.meetingForm?.clearValidate()
      this.open = true
      this.initMap()
    },
    // 编辑会议
    editMeeting(row) {
      row.tbMeetingFile && row.tbMeetingFile.forEach(item => {
        item.name = item.fileName
      });
      this.form = {
        meetingId: row.meetingId,
        meetingName: row.meetingName,
        meetingType: row.meetingType,
        meetingCompere: row.meetingCompere,
        meetingStartTime: row.meetingStartTime,
        meetingEndTime: row.meetingEndTime,
        tbMeetingFile: row.tbMeetingFile,
        meetingAddress: row.meetingAddress,
        longitude:row.longitude,
        latitude:row.latitude,
        signInLong:row.signInLong,
        isRemote:row.isRemote
      }
      this.initMap()
      this.meetingLook = false
      this.open = true
    },
    // 查看会议
    lookMeeting(row) {
      row.tbMeetingFile && row.tbMeetingFile.forEach(item => {
        item.name = item.fileName
      });
      this.form = row
      this.$refs.meetingForm?.clearValidate()
      this.meetingLook = true
      this.open = true
    },
    // 更改会议状态
    changeMeetingState(row, state) {
      let tipText = ''
      switch (state) {
        case '0': tipText = '撤销取消'
          break;
        case '1': tipText = '结束会议'
          break;
        case '2': tipText = '提前开始'
          break;
        case '3': tipText = '取消会议'
          break;
      }
      this.$modal.confirm(`是否确认${tipText}?`).then(function () {
        return updateStatusManage({ meetingId: row.meetingId, meetingState: state });
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("新增成功");
      })
    },
    // 延迟
    delayManage(row) {
      this.currentData = row
      this.delayOpen = true
    },
    // 提交延迟
    submitDelay() {
      delayedStart({ meetingId: this.currentData.meetingId, delayTime: this.delayTime }).then(res => {
        this.getList();
        this.cancel('delayOpen')
        this.$modal.msgSuccess("延迟成功");
      })
    },
    // 关闭弹窗，去除数据
    cancel(name) {
      this[name] = false
      this.delayTime = null
      this.tbMeetingFile = []
      this.currentData = null
      this.content = ''
    },
    // 会议操作记录
    operationRecord(row) {
      this.currentData = row
      this.topicsTitle = row.meetingName
      getOperateLog({ meetingSerial: row.meetingSerial }).then(res => {
        res.data.forEach(item => {
          item.content = ''
          switch (item.type) {
            case '0': item.content = `提前${item.operateTime}分钟开始`
              break;
            case '1': item.content = `延迟${item.operateTime}分钟`
              break;
            case '2': item.content = `结束会议`
              break;
            case '3': item.content = `取消会议`
              break;
            case '4': item.content = `撤销取消会议`
              break;
          }
        })
        this.operationList = res.data
        this.operationOpen = true
      })
    },
    // 签到名单
    lookCheckIn(row) {
      this.queryCheckIn = {
        meetingName: row.meetingName,
        meetingId: row.meetingId,
        meetingSerial: row.meetingSerial,
        type: 2,
        pageNum: 1,
        pageSize: 10,
      }
      this.getCheckInList()
      this.checkInOpen = true
    },
    // 查询签到名单
    getCheckInList() {
      getSignInList(this.queryCheckIn).then(res => {
        this.checkInList = res.rows
        this.checkInTotal = res.total
      })
    },
    // 上传文件
    addFile(row) {
      getUploadMeetingFile({meetingId:row.meetingId}).then(res=>{
        console.log(res.data.tbMeetingMaterials.id);
        if(res.data.tbMeetingFile){
          res.data.tbMeetingFile.forEach(item=>item.name = item.fileName)
          this.tbMeetingFile = res.data.tbMeetingFile
          this.content = res.data.tbMeetingMaterials.meetingText
          this.contentId = res.data.tbMeetingMaterials.id
        }
      })
      this.currentData = row
      this.fileOpen = true
    },
    // 文件上传成功处理
    fileSuccess(response, file, fileList) {
      this.tbMeetingFile = fileList.map(v => {
        if (v.response) {
          return {
            name: v.response.originalFilename,
            originalFilename: v.response.originalFilename,
            fileName: v.response.originalFilename,
            fileType: v.name.substring(v.name.lastIndexOf(".") + 1),
            meetingFileUrl: process.env.VUE_APP_BASE_API + v.response.fileName
          }
        } else {
          return {
            name: v.fileName,
            originalFilename: v.fileName,
            fileName: v.fileName,
            fileType: v.fileType,
            meetingFileUrl: v.meetingFileUrl
          }
      }
      })
    },
    // 上传文件提交
    submitFile() {
      uploadMeetingFile({ meetingId: this.currentData.meetingId, tbMeetingFile: this.tbMeetingFile }).then(res => {
        this.getList();
        this.cancel('fileOpen')
        this.$modal.msgSuccess("上传成功");
      })
    },
    // 会议后文件上传
    meetingFile(){
      uploadMeetingFile({ meetingId: this.currentData.meetingId, tbMeetingFile: this.tbMeetingFile,tbMeetingMaterials:{"meetingText":this.content,'id':this.contentId} }).then(res => {
        this.getList();
        this.cancel('fileOpen')
        this.$modal.msgSuccess("上传成功");
      })
    },
    // 删除会议
    delMeeting(row) {
      this.$modal.confirm('是否确认删除会议?').then(function () {
        return delManage(row.meetingId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      })
    },
    // 获取部门树
    getDeptTree() {
      deptTreeSelect({ pageNum: 1, pageSize: 999999 }).then(response => {
        this.setDeptId(response.data)
        this.deptOptions = response.data
      })
    },
    // 递归更改部门值
    setDeptId(list) {
      for (const item of list) {
        item.id = item.label
        if (item.children && item.children.length > 0) {
          this.setDeptId(item.children)
        }
      }
    },
    // 获取用户列表
    getUserList() {
      listUser({ pageNum: 1, pageSize: 999999 }).then(response => {
        this.userList = response.rows
      })
    },
    // 开始时间校验
    validateTime(rule, value, callback) {
      let valText = rule.field === 'meetingStartTime' ? '开始时间' : '结束时间'
      // 判断是否大于当前时间
      if (new Date(value).getTime() <= new Date().getTime()) {
        callback(new Error(`${valText}需要大于当前时间`))
      }
      // 判断开始时间是否大于结束时间
      if (this.form.meetingStartTime && this.form.meetingEndTime && new Date(this.form.meetingStartTime).getTime() >= new Date(this.form.meetingEndTime).getTime()) {
        callback(new Error(`开始时间需大于结束时间`))
      }
      callback()
    },
    // uploadBefore() {
    //   this.$refs.upload.clearFiles();
    // },
    showFile(e){
      window.open(e.meetingFileUrl, '_blank')
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.form.tbMeetingFile = fileList.map(v => {
        if(v.response) {
        return {
          name: v.response.originalFilename,
          originalFilename:v.response.originalFilename,
          fileName: v.response.originalFilename,
          fileType: v.name.substring(v.name.lastIndexOf(".") + 1),
          meetingFileUrl: process.env.VUE_APP_BASE_API + v.response.fileName
        }
      }else{
        return {
          name: v.fileName,
          originalFilename:v.fileName,
          fileName: v.fileName,
          fileType: v.fileType,
          meetingFileUrl: v.meetingFileUrl
        }
      }
      })
      console.log(this.form.tbMeetingFile);
    },
    // 提交会议
    submitForm() {
      if (this.meetingLook) {
        return this.cancelManage()
      }
      this.$refs.meetingForm.validate((valid) => {
        if (valid) {
          if (this.form.meetingId) {
            console.log(this.form);
            updateManage(this.form).then(res => {
              this.$modal.msgSuccess("修改成功");
              this.open = false
              this.reset();
              this.queryParams.pageNum = 1
              this.getList();
            })
          } else {
            // let list = this.$refs.cascader.getCheckedNodes()
            // addManage({ ...this.form, meetingCompere: list.map(v => v.data.userId).join(',') }).then(res => {
            addManage(this.form).then(res => {
              this.$modal.msgSuccess("新增成功");
              this.open = false
              this.reset();
              this.queryParams.pageNum = 1
              this.getList();
            })
          }
        } else {
          return false;
        }
      })
    },
    // 会议弹窗取消按钮
    cancelManage() {
      this.open = false;
      this.reset();
    },
    // 会议表单重置
    reset() {
      this.form = {
        meetingName: null,
        meetingType: null,
        meetingCompere: null,
        meetingStartTime: null,
        meetingEndTime: null,
        tbMeetingFile: [],
        meetingAddress:null,
        longitude:null,
        latitude:null,
        isRemote:'1',
        signInLong:null
      };
    },
    // 查看议题
    lookTopics(row) {
      this.topicsTitle = row.meetingName
      this.getTopicsList(row)
      this.topicsForm.meetingId = row.meetingId
      this.topicsForm.meetingState = row.meetingState
      this.topicsOpen = true
    },
    // 获取议题列表
    getTopicsList(row) {
      listTopic({ meetingId: row.meetingId }).then(res => {
        for (const item of res.data) {
          item.user = item.tbMeetingUser.map(v => v.lastName).join('、')
          item.leaderUser = item.leaderTbMeetingUser.map(v => v.lastName).join('、')
        }
        this.topicsList = res.data
      })
    },
    // 添加议题
    addTopic() {
      this.topicsForm.topicSort = this.topicsList.length + 1
      this.$refs.topicsForm?.clearValidate()
      this.addTopics = true
    },
    // 校验领导和部门人员是否重复
    validateUser(rule, value, callback) {
      if (this.topicsForm.leaderTbMeetingUser.length > 0 && this.topicsForm.tbMeetingUser.length > 0) {
        let hasList = this.topicsForm.leaderTbMeetingUser.filter(v => this.topicsForm.tbMeetingUser.includes(v))
        if (hasList && hasList.length > 0) {
          callback(new Error(`领导和列席部门人员不能重复添加`))
        }
        callback()
      }
      callback()
    },
    // 修改议题
    editTopic(row) {
      this.topicsForm = {
        meetingId: row.meetingId,
        meetingState: this.topicsForm.meetingState,
        topicId: row.topicId,
        topicSort: row.topicSort,
        topicName: row.topicName,
        topicDuration: row.topicDuration,
        deptName: row.deptName,
        topicAddress: row.topicAddress,
        topicType: row.topicType,
        tbMeetingUser: row.tbMeetingUser.map(v => v.userId),
        leaderTbMeetingUser: row.leaderTbMeetingUser.map(v => v.userId),
      }
      this.addTopics = true
    },
    // 提交议题
    submitTopic() {
      this.$refs.topicsForm.validate((valid) => {
        if (valid) {
          let tbMeetingUser = []
          let leaderTbMeetingUser = []
          this.userList.forEach(item => {
            if (this.topicsForm.tbMeetingUser.includes(item.userId)) {
              tbMeetingUser.push({
                lastName: item.nickName,
                leadershipFlg: '1',
                userId: item.userId,
                deptId: item.deptId,
                mobile: item.phonenumber,
              })
            }
            if (this.topicsForm.leaderTbMeetingUser.includes(item.userId)) {
              leaderTbMeetingUser.push({
                lastName: item.nickName,
                leadershipFlg: '0',
                userId: item.userId,
                deptId: item.deptId,
                mobile: item.phonenumber,
              })
            }
          })
          if (this.topicsForm.topicId) {
            updateTopic({ ...this.topicsForm, tbMeetingUser, leaderTbMeetingUser }).then(res => {
              this.$modal.msgSuccess("修改成功")
              this.addTopics = false
              this.resetTopic()
              this.getTopicsList(this.topicsForm)
            })
          } else {
            addTopic({ ...this.topicsForm, tbMeetingUser, leaderTbMeetingUser }).then(res => {
              this.$modal.msgSuccess("新增成功")
              this.addTopics = false
              this.resetTopic()
              this.getTopicsList(this.topicsForm)
            })
          }
        } else {
          return false
        }
      })
    },
    // 关闭议题弹窗
    cancelTopic() {
      this.addTopics = false
      this.resetTopic()
    },
    // 重置参数
    resetTopic() {
      this.topicsForm = {
        meetingId: this.topicsForm.meetingId,
        meetingState: this.topicsForm.meetingState,
        topicId: undefined,
        topicSort: null,
        topicName: null,
        topicDuration: null,
        deptName: null,
        topicAddress: null,
        topicType: null,
        tbMeetingUser: [],
        leaderTbMeetingUser: [],
      }
      this.$refs.topicsForm?.clearValidate()
    },
    // 删除议题
    delTopic(row) {
      this.$modal.confirm('是否确认删除议题?').then(function () {
        return deleteTopic(row.topicId);
      }).then(() => {
        this.getTopicsList(row)
        this.$modal.msgSuccess("删除成功");
      })
    },
    // 查看议题操作记录
    lookRecord(row) {
      this.currentData = row
      this.topicsTitle = row.topicName
      getTopicLog({ topicId: row.topicId }).then(res => {
        res.data.forEach(item => {
          item.content = ''
          switch (item.type) {
            case '0': item.content = `提前${item.topicTime}分钟开始`
              break;
            case '1': item.content = `延迟${item.topicTime}分钟`
              break;
            case '2': item.content = `结束议题`
              break;
          }
        })
        this.operationList = res.data
        this.operationOpen = true
      })
    },
    // 打开排序弹窗
    sortTopics() {
      this.sortList = [...this.topicsList]
      this.sortOpen = true
    },
    // 拖拽开始
    dragstart(index) {
      this.dragIndex = index;
    },
    // 拖拽进入某节点触发
    dragenter(e, index) {
      e.preventDefault();
      // 避免源对象触发自身的dragenter事件
      if (this.dragIndex !== index) {
        const source = this.sortList[this.dragIndex];
        this.sortList.splice(this.dragIndex, 1);
        this.sortList.splice(index, 0, source);
        // 排序变化后目标对象的索引变成源对象的索引
        this.dragIndex = index;
      }
    },
    // 拖拽结束
    dragover(e, index) {
      e.preventDefault();
    },
    // 提交议题排序
    submitSort() {
      let topicList = this.sortList.map((v, i) => {
        return {
          topicId: v.topicId,
          topicSort: i + 1
        }
      })
      sortTopic(topicList).then(res => {
        this.getTopicsList(this.topicsForm)
        this.sortOpen = false
        this.$modal.msgSuccess("排序成功");
      })
    },
    // 关闭排序弹窗
    cancelSort() {
      this.sortOpen = false
    },
  }
};
</script>

<style lang="scss" scoped>
::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}
::v-deep input[type="number"] {
    -moz-appearance: textfield !important;
}
#containers {
  padding: 0px;
  margin-top: 40px;
  width: 100%;
  height: 350px;
  border-radius: 6px;
}

.file-list{
  width: 200px;
  display: flex;
  justify-content: space-between;
  padding-right: 30px;
  margin-top: 10px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container {
  height: 60vh;
  overflow-y: auto;
}

.topic-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  margin-bottom: 10px;
}

.topcis {
  margin-top: 10px;
  display: flex;

  &-time {
    width: 60px;
    margin-right: 40px;
    color: #000000;
    font-size: 20px;
    text-align: center;

    .startTime {
      margin-bottom: 10px;
    }

    .line {
      margin: 10px auto;
      height: 75%;
      width: 3px;
      background-color: #2B6BD9;
      border-radius: 4px;
    }
  }

  &-info {
    width: 100%;
    font-size: 18px;
    background-color: #f4f7fe;
    padding: 20px 30px;
    border-radius: 5px;
    position: relative;

    .info-item {
      margin-bottom: 20px;
      display: flex;
      gap: 20px;
    }

    .line {
      background-color: #2B6BD9;
      position: absolute;
      left: 0;
      top: 0;
      content: '';
      height: 100%;
      width: 4px;
      display: inline-block;
      border-radius: 4px;
    }

    .info-text {
      flex: none;
      width: 80px;
    }

    .info-content {
      flex: 1;
      display: inline-block;
      color: #000000;
      width: 100%;
    }

    .info-btn {
      float: right;
      margin-top: 20px;
    }
  }
}

.drag-list {
  list-style: none;
  padding: 0;

  .list-item {
    cursor: move;
    width: 100%;
    background: #dae1f0;
    border-radius: 4px;
    color: #000;
    margin-bottom: 6px;
    height: 46px;
    line-height: 46px;
    text-align: center;
  }
}

.el-card {
  margin: 10px 0 20px;
}

.card-item {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 36px;

  .card-item-title {
    width: 90px;
    color: #919191;
  }

  .card-item-content {
    color: #3d3d3d;
  }
}

::v-deep .el-step {
  .el-step__title {
    font-size: 18px;
  }

  .el-step__icon {
    color: #fff;
    background-color: #1890ff;
  }

  .el-step__description {
    padding-right: 0;
  }
}
</style>
